{% extends 'blog/base.html' %}
{% load static %}

{% block title %}
文章详情
{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-8">
            <!-- 文章详情 -->
            <div class="card mt-3">
                <div class="card-body">
                    <h5 class="card-title">{{ article.title }}</h5>
                    <p class="card-text">{{ article.get_markdown_content|safe }}</p>
                    <p class="card-text">
                        <small class="text-muted">
                            {{ article.author }} 发布于 {{ article.create_at|date:"Y-m-j H:i:s" }}
                            浏览量: {{ article.views }}
                        </small>
                    </p>

                    <!-- 前后文章 -->
                    <nav aria-label="Page navigation example">
                        <ul class="pagination justify-content-between">
                            <li class="page-item">
                                {% if article.get_previous %}
                                <a class="page-link" href="{{ article.get_previous.get_absolute_url }}">{{ article.get_previous }}</a>
                                {% endif %}
                            </li>
                            <li class="page-item">
                                {% if article.get_next %}
                                <a class="page-link" href="{{ article.get_next.get_absolute_url }}">{{ article.get_next }}</a>
                                {% endif %}
                            </li>
                        </ul>
                      </nav>
                </div>
            </div>

            <!-- 评论 -->
            {% include 'blog/comment_form.html' %}
            {% include 'blog/comment_list.html' %}
        </div>
        
        <!-- 右侧边栏 -->
        <div class="col-4">
            {% include 'blog/sidebar.html' %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'blog/js/comment.js' %}"></script>
{% endblock %}
